<!-- 电站统计 -->
<template>
  <div>
    <div class="content">
      <h4 id="title">{{ $t('licence.sta_Title')}}</h4>
      <div class="main-content">
        <div class="title">
          <!-- 年月日选择 -->
          <div class="time-box flexStart">
            <el-radio-group style="margin-right: 20px" v-model="radio"  fill="#305ADD" border="true"
              @change="getStationStatistics">
              <el-radio-button :label="1">{{ $t('licence.sta_day')}}</el-radio-button>
              <el-radio-button :label="2">{{ $t('licence.sta_week')}}</el-radio-button>
              <el-radio-button :label="3">{{ $t('licence.sta_month')}}</el-radio-button>
              <el-radio-button :label="4">{{
                $t('licence.sta_quarter')}}</el-radio-button>
              <el-radio-button :label="5">{{ $t('licence.sta_year')}}</el-radio-button>
              <el-radio-button :label="6">{{ $t('licence.sta_liyear')}}</el-radio-button>
            </el-radio-group>
            <el-date-picker v-if="radio== 1" v-model="stockDate" type="daterange" range-separator="-"
              :start-placeholder="$t('licence.use_kaishi')" :end-placeholder="$t('licence.use_jieshu')"
              format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              :disabled-date="disabledDate" style="margin: 0 20px;width: 300px">
            </el-date-picker>
            <el-date-picker v-if="radio!= 1" style="margin: 0 20px; width: 150px" :clearable="true"
              v-model="startDay.stockDate" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              :placeholder="$t('licence.sta_selectDate')">
            </el-date-picker>
            <!-- @change="changeTime" -->
            <el-button @click="getStationStatistics" type="primary" style="margin: 20px 0">{{ $t('licence.fau_Thequery')}}</el-button>
          </div>
          <div class="export" @click="Export">{{ $t('licence.sta_export')}}</div>
        </div>
        <!-- 数据曲线图 -->
        <div>
          <!-- 发电趋势 -->
          <div class="title" id="title" v-loading="loading">
            <!-- 曲线图 -->
            <div id="TrendcurveData" ref="cqjk" v-show="radio <= 1" class="curveData"></div>
            <div id="ColumnarData" v-show="radio > 1"></div>
            <!-- 柱状图 -->
          </div>
        </div>
      </div>
    </div>
    <div class="content-two" style="margin-top: 20px">
      <h4 id="title">{{ $t('licence.sta_title')}}</h4>
      <el-table :data="StationStatistics" height="400" style="width: 100%">
        <el-table-column prop="num" :label="$t('licence.fau_num')" width="300">
        </el-table-column>
        <el-table-column prop="dateTime" :label="$t('licence.sta_Time')">
        </el-table-column>
        <el-table-column prop="energy" :label="$t('licence.sta_kwh')"> </el-table-column>
        <el-table-column prop="power" :label="$t('licence.sta_kw')"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="StationStatistics" lang="ts">
import * as echarts from "echarts";
import {getstationStatistic,getstationStatisticExport} from "@/api/statisticalData/StationStatistics";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
     const onday = ref('')
     const disabledDate = (time:any)=>{
          return time.getTime() > Date.now();
        }
      const powerStation = ref({
        id:-1
      }) //获取保存电站信息
      // 查询功能
      // 日期
      const radio = ref(1)//年月日默认选择
      // 时间选择器
      const getNowTime = () => {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();

        const defaultDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
        return [defaultDate,defaultDate];
      }
      const getNowTimes = ():string => {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();

        const defaultDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
        return defaultDate;
      }
      const startDay = ref({
        stockDate: getNowTimes() //日期选择
      })
      const stockDate = ref(getNowTime()) //日期选择
      // 电站统计数据保存
      const StationStatistics = ref([])
      const lang = ref(0)
      const loading = ref(true)//加载状态

  onMounted(()=>{
    // 获取语言
    if (localStorage.getItem("locale") == "en_US") {
      lang.value = 1;
    } else {
      lang.value = 0;
    }
    // 获取电站信息
    powerStation.value = JSON.parse(localStorage.getItem("powerStation") as string);
    // 电站统计
    getStationStatistics();
  })
    // 电站统计
    const getStationStatistics = async () => {
      loading.value = true
      let query = {
        stationId: powerStation.value.id,
        timeType: radio.value,
        lang: lang.value,
        startDay: radio.value == 1 ? stockDate.value ? stockDate.value[0] : '' : startDay.value.stockDate, //开始时间
        endDay: stockDate.value ? stockDate.value[1] : "", //结束时间
      };
      let res = await getstationStatistic(query);
      StationStatistics.value = res.data.statisticVos;

      if (radio.value <= 1) {
        getTrendcurveData(res.data.stationChartsVo);
      } else {
        getColumnarData(res.data.stationChartsVo);
      }
      loading.value = false
    }
    // 电站数据导出
    const Export = async () => {
      const res = await getstationStatisticExport({
        stationId: powerStation.value.id,
        timeType: radio.value,
        lang: lang.value,
        startDay: radio.value == 1 ? stockDate.value ? stockDate.value[0] : '' : startDay.value.stockDate, //开始时间
        endDay: stockDate.value ? stockDate.value[1] : "", //结束时间
      });
      let url = window.URL.createObjectURL(
        new Blob([res], { type: "application/vnd.ms-excel" })
      );
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", t("licence.sta_tongji") + ".xls");
      document.body.appendChild(link);
      link.click();
    }
    // 数据曲线图
    const getTrendcurveData = (data:any) => {
      const myChart = echarts.init(document.getElementById("TrendcurveData") as HTMLElement)as echarts.ECharts;
      let dataArr1 = data.series[0].data;
      let dataArr2 = data.series[1].data;
      let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
      let intervalY2 = Math.abs(Math.max(...dataArr2) / 6);
      myChart.setOption({
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          // data: ["发电量", "功率"],
        },
        // 位置
        grid: {
          left: "4%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.categories,
        },
        yAxis: [
          {
            type: "value",
            name: data.series[0].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              // 保留一位小数
              formatter: function (value:any) {
                return value.toFixed(1);
              },
            },
            min: 0,
            max: intervalY1 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY1, // 强制设置坐标轴分割间隔。
          },
          {
            type: "value",
            name: data.series[1].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              // 保留一位小数
              formatter: function (value:any) {
                return value.toFixed(1);
              },
            },
            min: 0,
            max: intervalY2 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY2, // 强制设置坐标轴分割间隔。
          },
        ],
        series: [
          {
            name: data.series[0].name,
            data: data.series[0].data,
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#5079F6",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(44,90,221)",
                },
                {
                  offset: 1,
                  color: "rgba(44,90,221,0)",
                },
              ]),
            },
            yAxisIndex: 0, //对应标签yAxis中的第一个数据
          },
          {
            name: data.series[1].name,
            data: data.series[1].data,
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#E28868",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255,78,20)",
                },
                {
                  offset: 1,
                  color: "rgba(255,78,20,0)",
                },
              ]),
            },
            yAxisIndex: 1, //对应标签yAxis中的第二个数据
          },
          window.addEventListener("resize", function () {
            myChart.resize();
          }),
        ],
      });
    }
    // 日以外的柱状图
    const getColumnarData = (data:any) => {
      const myChart = echarts.init(document.getElementById("ColumnarData") as HTMLElement)as echarts.ECharts;
      myChart.setOption({
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          // data: ["发电量", "功率"],
        },
        // 位置
        grid: {
          left: "4%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: data.categories,
          //  boundaryGap: ['0', '1%'],//留白大小，坐标轴两边留白
        },
        yAxis: [
          {
            type: "value",
            name: data.series[0].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            //  boundaryGap: ['5%', '5%'],//留白大小，坐标轴两边留白
          },
        ],
        series: [
          {
            name: data.series[0].name,
            data: data.series[0].data,
            type: "bar",
            barWidth: "16",
            // barCategoryGap: "5%",
            barGap: 7,
            itemStyle: {
              color: "#305ADD",
            },
          },
          window.addEventListener("resize", function () {
            myChart.resize();
          }),
        ],
      });
    }
</script>

<style scoped lang="scss">
* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

// 曲线图
.curveData,
#ColumnarData {
  width: 100% !important;
  height: 600px;
}

// 分页
.block {
  display: flex;
  justify-content: end;
}

.content,
.content-two {
  width: 100%;
  background-color: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 6px;

  #title {
    // width: 1623px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0e1319;
    margin-bottom: 20px;
  }

  // ========
  .title {
    display: flex;
    justify-content: space-between;
    .time-box {
      // flex: 1;
      margin: -20px 0 20px -10px;

      // 年月日选择
      ::v-deep .el-radio-button__inner {
        border: none;
        border-radius: 4px;
        background: #e7e7e7;
        margin-left: 10px;
      }

      ::v-deep .el-radio-button:first-child .el-radio-button__inner {
        border-radius: 4px;
      }

      ::v-deep .el-radio-button--mini .el-radio-button__inner {
        padding: 6px 12px;
      }
    }

    .export {
      width: 70px;
      height: 36px;
      border-radius: 4px;
      border: 1px solid #dddfe6;
      font-size: 14px;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
    }
  }

  .active {
    color: #305add;
  }

  // 查询按钮
  .el-button--primary {
    color: #ffffff;
    background-color: #305add;
    border-color: #305add;
  }
}
</style>
